<html>
	<head>
		<title>Model Viewer Fidelity Tests</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<style>
			html, body {
				margin: 0;
				padding: 0;
				font-family: 'Roboto', sans-serif;
			}

			body {
				background-color: #111;
				color: white;
			}

			#container, #selector {
				width: 800px;
				margin: auto;
				margin-top: 20px;
			}

			#container > * {
				display: inline-block;
				margin-bottom: 20px;
				width: 100%;
			}

			#container.large-images {
				width: 1200px;
				max-width: 100%;
			}

			a {
				width: 50%;
			}

			.img-wrapper {
				display: flex;
				justify-content: center;
			}

			img {
				width: 100%;
			}

			img:first-child {
				margin-right: 5px;
			}

			h1, span {
				font-size: 15px;
				font-weight: 300;
			}

			label {
				display: block;
				padding: 3px 0;
			}

			label span {
				display: inline-block;
				width: 150px;
			}

			body {
				visibility: hidden;
			}
		</style>

	</head>
	<body>
		<div id="selector">
			<label>
				<span>comparison&nbsp;</span>
				<select value="model-viewer">
					<option value="dspbr-pt">dspbr-pt</option>
					<option value="filament">filament</option>
					<option value="babylon">babylon</option>
					<option value="gltf-sample-viewer">gltf-sample-viewer</option>
					<option value="model-viewer">model-viewer</option>
					<option value="rhodonite">rhodonite</option>
					<option value="stellar">stellar</option>
					<option value="prior-commit">prior-commit</option>
				</select>
			</label>
			<label>
				<span>large images&nbsp;</span>
				<input type="checkbox" />
			</label>
		</div>
		<div id="container"></div>
		<script src="./screenshotList.js" type="module"></script>
	</body>
</html>
